<template>
  <div>
    <el-tag>压纹</el-tag>
    <el-checkbox @change="clickToChange()">需要</el-checkbox>
    <br/>
    <template v-if="getRole()">
    <el-tag type="warning" class="cost" v-if="!yawem.disable">成本: {{computeCost()}}</el-tag>
      <el-tag type="warning" class="cost" v-else>成本: </el-tag>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Yawen',
  props: ['Q', 'x', 'y', 'm', 'confirm', 'k'],
  data () {
    return {
      yawem: {
        disable: true
      }
    }
  },
  methods: {
    computeCost () {
      let q = parseInt(this.Q)
      let chang = parseInt(this.x)
      let kuan = parseInt(this.y)
      let s = chang <= kuan ? (chang + 15) * (kuan + 10) : (chang + 10) * (kuan + 15)
      let hPrice = s >= 600 * 700 ? 0.1 : 0.4 * s / Math.pow(10, 6)
      let bPrice = s >= 600 * 700 ? 0.05 : 0.3 * s / Math.pow(10, 6)
      let price = this.k <= 200 ? bPrice : hPrice
      let cost = price * q <= 150 ? 150 : price * q
      return price * q <= 150 ? `150 (成本小于开机费)` : `${price} × ${q} = ${cost}`
    },
    clickToFin () {
      if (!this.yawem.disable) this.$emit('transferToFather', 'yawen', this.yawen)
    },
    clickToChange () {
      this.yawem.disable = !this.yawem.disable
    },
    getRole () {
      return sessionStorage.getItem('roleType') === '1'
    }
  },
  watch: {
    confirm (nV, oV) {
      if (nV !== oV) this.clickToFin()
    }
  }
}
</script>

<style scoped>
.length{
  width: 100px;
}

.el-select{
  margin-right: 10px;
  margin-top: 10px;
}

.el-input{
  margin-right: 10px;
  margin-top: 10px;
}

.cost{
  margin: 10px 0;
}
</style>
